<template>
  <div class="vlonTinymceEditor">
    <VueTinymce
      ref="vueTinymce"
      v-model="tinymceContent"
      :setting="setting"
      :setup="setup"
    />
  </div>
</template>

<script>
import Bus from "@/utils/bus.js"
export default {
  name: "VlonTinymceEditor",
  data() {
    return {
      tinymceContent: "",
      setting: null,
      editor: null,
    };
  },
  props: ["controlsIndex", "rightIndex", "catalogIndex", "controlid","content"],
  components: {},
  created() {
    this.setting = new Object();
    this.setting.language = "zh_CN";
    this.setting.width = "100%";
    this.setting.height = 450;
    this.setting.max_height = 600;
    //设置主题
    this.setting.theme = "silver";
    this.setting.resize = false;
    //显示隐藏状态栏
    this.setting.statusbar = false;
    this.setting.placeholder = "请输入内容";
    //隐藏底栏的元素路径
    this.setting.elementpath = false;
    //菜单[格式]预览样式
    this.setting.preview_styles = false;
    this.setting.menubar = "file edit";
    //自定义菜单
    this.setting.menu = {
      file: { title: "文件", items: "newdocument preview" },
      edit: {
        title: "编辑",
        items: "undo redo | cut copy paste pastetext | selectall",
      },
    };
    this.setting.quickbars_insert_toolbar = false;
    this.setting.quickbars_selection_toolbar = false;

    this.setting.toolbar_mode = "wrap";

    //自定义工具栏
    this.setting.toolbar = `bold italic underline strikethrough forecolor backcolor link image| 
    blocks fontfamily fontsize fullscreen| 
    alignleft aligncenter alignright alignjustify numlist bullist indent outdent`;

    //插件
    this.setting.plugins = `advlist 
    preview autolink link image table media lists 
    searchreplace template code help fullscreen quickbars 
    nonbreaking anchor directionality 
    visualblocks visualchars codesample 
    charmap pagebreak insertdatetime 
    wordcount emoticons autosave autoresize autosave`;
    this.setting.toolbar_persist = true;
    //替换还是附加到自定义段落样式列表
    this.setting.style_formats_merge = true;
    //隐藏当前不可用的样式列表
    this.setting.style_formats_autohide = true;
    this.setting.readonly = false;
    this.setting.file_picker_types = "image";
  },
  mounted() {
    this.$nextTick(() => {
      this.tinymceContent = this.content; 
      //console.log("controlsIndex:",this.controlsIndex);
      //console.log("this.content:",this.content);
      //console.log("this.tinymceContent:",this.tinymceContent);
    });
    Bus.$on("chooseImgAfterToVueTinymceEditor", params => { console.log(params.url)
      this.editor.insertContent(`<img src="${params.url}" alt="" style="max-width:100%;" />`)
    })
  },
  methods: {
    setup(editor) {
      //富文本组件渲染时触发
      // //console.log("富文本组件渲染时触发",editor);
      this.editor = editor;
      // //console.log(this.editor);
      //组件初始化时执行
      this.editor.ui.registry.addToggleButton("image", {
        icon: "image",
        tooltip: "Insert/edit image",
        onAction: this.chooseImgOpen,
        onSetup: () => {
          // //console.log("图片组件初始化成功");
        },
      });
    },
    //富文本中，在菜单栏中，点击图片按钮，打开选择图片弹窗
    chooseImgOpen(){
      Bus.$emit("openChooseImgGroup", {
        ename:"vueTinymceChooseImage",
        controlsIndex: this.controlsIndex,
        rightIndex: this.rightIndex,
        catalogIndex: this.catalogIndex,
        controlid: this.controlid,
      });
    },
  },
  computed: {},
  watch: {
    tinymceContent(val) {
      this.$emit("tinymceContentUpdate", val);
    },
  },
};
</script>

<style scoped lang="scss">
.vlonTinymceEditor {
  width: 100%;
}
</style>
<style lang="scss">
.vlonTinymceEditor {
  button.tox-tbtn[title="区块"] {
    width: 80px;
  }
  button.tox-tbtn[title="字号"] {
    width: 80px;
  }
  button.tox-tbtn[title="字体"] {
    width: 110px;
  }
}
.tox-collection__item-label h1,
.tox-collection__item-label h2,
.tox-collection__item-label h3,
.tox-collection__item-label h4,
.tox-collection__item-label h5,
.tox-collection__item-label h6 {
  font-size: revert !important;
  font-weight: revert !important;
}
</style>

